<template>
  <Tab />
  <div class="container">
    <div class="content">
      <img src="../../static/img/success.png" alt="" />
      <span>支付成功</span>
      <div class="address">
        <div>
          <span>北京</span>
          <img src="../../static/img/air2.png" alt="" />
          <span>广州</span>
        </div>
        <span>2024年1月25日</span>
      </div>
      <span class="desc-title">南航 CZ3210 22:00 ~ 00:50,机票已购买成功</span>
      <div class="desc">
        <div class="desc-content">
          <div class="left">
            <span>AI帮您省了</span>
          </div>
          <div class="right">
            <span>100元</span>
          </div>
        </div>
      </div>

      <div class="btn" @click="queyOrder">
        <span>查看订单</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { uni } from "@dcloudio/uni-h5";
import mitter from "../../utils/mitter";
import typeStore from "../store/typeStore.js";

let store = typeStore();
function queyOrder() {
  store.type = '1';
  uni.navigateTo({
    url: "/pages/index/index",
  });
}
</script>
<style scoped lang="scss">
.container {
  .content {
    width: 664rpx;
    height: 920rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    // border: 1px solid red;

    .btn {
      width: 440rpx;
      height: 100rpx;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(205, 207, 210, 0.27);
      border-radius: 54rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 100rpx;

      &:active {
        background: #005ff9;
        border-radius: 54rpx;
        border: 2rpx solid #e4e9ef;
        box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(171, 181, 191, 0.2);
        span {
          color: #ffffff;
        }
      }
      span {
        width: 144rpx;
        height: 36rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        color: #000000;
        line-height: 36rpx;
        text-align: center;
        font-style: normal;
      }
    }

    & > :nth-child(1) {
      width: 224rpx;
      height: 220rpx;
    }
    & > :nth-child(2) {
      width: 176rpx;
      height: 44rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 44rpx;
      color: #000000;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
    }

    .address {
      display: flex;
      align-items: center;
      margin-top: 10px;
      & > :nth-child(1) {
        display: flex;
        align-items: center;
        & > :nth-child(1),
        & > :nth-child(3) {
          width: 64rpx;
          height: 32rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #005ff9;
          line-height: 32rpx;
          text-align: left;
          font-style: normal;
        }
        img {
          width: 46rpx;
          height: 41rpx;
          margin: 0 10px;
        }
      }
      & > :nth-child(2) {
        width: 236rpx;
        height: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #434343;
        line-height: 32rpx;
        text-align: center;
        font-style: normal;
        margin-left: 10px;
      }
    }

    .desc {
      width: 202rpx;
      height: 42rpx;
      border-radius: 3px;
      border: 1px solid #f23232;
      margin-left: 10px;
      margin-top: 10px;
      .desc-content {
        display: flex;
        align-items: center;

        .right {
          width: 86rpx;
          height: 42rpx;
          background: #f23232;
          border-radius: 3px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 1px;

          span {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #ffffff;
            line-height: 11px;
            text-align: left;
            font-style: normal;
            // width: 55px;
          }
        }
        .left {
          height: 21px;
          background: rgba(242, 50, 50, 0.08);
          border-radius: 3px;
          //   border: 1px solid #f23232;
          display: flex;
          align-items: center;
          justify-content: center;

          span {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 11px;
            color: #f23232;
            line-height: 11px;
            text-align: left;
            font-style: normal;
            width: 57px;
            margin-left: 3px;
          }
        }
      }
    }

    .desc-title {
      width: 570rpx;
      height: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #8e8e8e;
      line-height: 32rpx;
      text-align: center;
      font-style: normal;
      margin-top: 10px;
    }
  }
}
</style>
